<!--评论模块-->
<template>
  <div class="container">
    <div v-if="comments.length" v-infinite-scroll="handleLoad" :style="{ height }" style="overflow:auto">
      <div v-for="item in comments" :key="item.id" class="comment">
        <div class="info">
          <img class="avatar" :src="item.avatar">
          <div class="right">
            <div class="name">{{ item.nickName }}</div>
            <div class="date">{{ item.date }}</div>
          </div>
        </div>
        <div class="content">{{ item.content }}</div>
        <div class="control">
          <span class="like" :class="{active: item.likeNum}" @click="likeClick(item)">
            <i class="iconfont icon-like" />
            <span class="like-num">{{ item.likeNum > 0 ? item.likeNum + '人赞' : '赞' }}</span>
          </span>
          <span v-if="isReply" class="comment-reply" @click="showCommentInput(item)">
            <i class="iconfont icon-comment" />
            <span>回复</span>
          </span>
          <div v-if="isDelete" class="left" style="color: #1E90FF; font-size: 12px; cursor: pointer; line-height: 1">
            <span type="danger" size="mini" @click="handleDetele(item)">删除</span>
          </div>
        </div>
        <div v-if="item.children" class="reply">
          <div v-for="reply in item.children.records" :key="reply.id" class="item">
            <div class="reply-content">
              <span class="from-name">{{ reply.nickName }}</span><span>: </span>
              <span v-if="reply.upperLevelNickName" class="to-name">@{{ reply.upperLevelNickName }}</span>
              <span>{{ reply.content }}</span>
            </div>
            <div class="reply-bottom">
              <span>{{ reply.date }}</span>
              <span v-if="isReply" class="reply-text" @click="showCommentInput(item, reply)">
                <i class="iconfont icon-comment" />
                <span>回复</span>
              </span>
            </div>
          </div>
          <div v-if="item.children.current < item.children.pages" class="see-more">
            <span @click="seeMore(item)">查看更多</span>
          </div>
          <div v-if="isReply && item.children && item.children.records.length > 0" class="write-reply" @click="showCommentInput(item)">
            <i class="el-icon-edit" />
            <span class="add-comment">添加新评论</span>
          </div>
          <transition name="fade">
            <div v-if="showItemId === item.id" class="input-wrapper">
              <el-input
                v-model="inputComment"
                class="gray-bg-input"
                type="textarea"
                :rows="3"
                autofocus
                placeholder="写下你的评论"
                @blur="handleBlur"
              />
              <div class="btn-control">
                <el-button class="cancel" size="mini" @click="cancel">取消</el-button>
                <el-button class="btn" type="primary" size="mini" @click="commitComment(item)">发布</el-button>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div v-else class="no-data">
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>

import Vue from 'vue'

export default {
  components: {},
  props: {
    height: {
      type: String,
      required: false,
      default: '100%'
    },
    comments: {
      type: Array,
      required: true
    },
    isReply: {
      type: Boolean,
      default: true
    },
    isDelete: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputComment: '',
      showItemId: '',
      parentId: 0,
      topLevelId: 0,
      content: '',
      replyName: ''
    }
  },
  computed: {},
  created() {},
  methods: {
    /**
     * 点赞
     */
    likeClick(item) {
      if (item.isLike === null) {
        Vue.$set(item, 'isLike', true)
        item.likeNum++
      } else {
        if (item.isLike) {
          item.likeNum--
        } else {
          item.likeNum++
        }
        item.isLike = !item.isLike
      }
    },
    /**
     * 点击取消按钮
     */
    cancel() {
      this.showItemId = ''
    },
    // input失去焦点
    handleBlur() {
      if (this.inputComment.trim() === 0) {
        this.showItemId = ''
      }
    },
    /**
    * 提交评论
    */
    commitComment(row) {
      this.content = this.replyName ? this.inputComment.split(this.replyName)[1] : this.inputComment
      this.$emit('add', this.topLevelId, this.parentId, this.content)
      this.inputComment = this.replyName ? this.replyName : ''
    },
    /**
     * 点击评论按钮显示输入框
     * item: 当前大评论
     * reply: 当前回复的评论
    */
    showCommentInput(item, reply) {
      if (reply) {
        this.replyName = '@' + reply.nickName + ' '
        this.inputComment = this.replyName
      } else {
        this.inputComment = ''
        this.replyName = ''
      }
      this.showItemId = item.id
      this.topLevelId = item.id
      this.parentId = reply ? reply.id : item.id
    },
    // 抛出删除事件
    handleDetele(item) {
      this.$emit('delete', item)
    },
    // 翻页请求
    handleLoad() {
      this.$emit('turnPage')
    },
    // 查看更多
    seeMore(row) {
      if (row.children.current < row.children.pages) {
        row.children.current += 1
        this.$emit('seeMore', row.id, row.children.current)
      }
    }
  }
}
</script>

<style scoped lang="scss">

  @import "~styles/index";

  .container {
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    .comment {
      display: flex;
      flex-direction: column;
      padding: 16px 10px 10px 10px;
      border-bottom: 1px solid $border-fourth;
      .info {
        display: flex;
        align-items: center;
        .avatar {
          border-radius: 50%;
          height: 36px;
          width: 36px;
        }
        .right {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          .name {
            font-size: 16px;
            color: $text-main;
            margin-bottom: 5px;
            font-weight: 500;
          }
          .date {
            font-size: 12px;
            color: $text-minor;
          }
        }
      }
      .content {
        font-size: 16px;
        color: $text-main;
        line-height: 1.5;
        padding: 10px 0;
        margin-top: 10px;
      }
      .control {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: $text-minor;
        margin-top: 12px;
        .like {
          display: flex;
          align-items: center;
          margin-right: 20px;
          cursor: pointer;
          &.active, &:hover {
            color: $color-main;
          }
          .iconfont {
            font-size: 14px;
            margin-right: 5px;
          }
        }
        .comment-reply {
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-right: 20px;
          &:hover {
            color: $text-333;
          }
          .iconfont {
            font-size: 16px;
            margin-right: 5px;
          }
        }

      }
      .reply {
        margin: 10px 0;
        border-left: 2px solid $border-first;
        .item {
          margin: 0 10px;
          padding: 10px 0;
          border-bottom: 1px dashed $border-third;
          .reply-content {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: $text-main;
            .from-name {
              color: $color-main;
            }
            .to-name {
              color: $color-main;
              margin-left: 5px;
              margin-right: 5px;
            }
          }
          .reply-bottom {
            display: flex;
            align-items: center;
            margin-top: 6px;
            font-size: 12px;
            color: $text-minor;
            .reply-text {
              display: flex;
              align-items: center;
              margin-left: 10px;
              cursor: pointer;
              &:hover {
                color: $text-333;
              }
              .icon-comment {
                margin-right: 5px;
              }
            }
          }
        }
        .see-more {
          display: flex;
          justify-content: center;
          padding-top: 10px;
          span {
            cursor: pointer;
            &:hover {
              color: $color-main;
            }
          }
        }
        .write-reply {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: $text-minor;
          padding: 10px;
          cursor: pointer;
          &:hover {
            color: $text-main;
          }
          .el-icon-edit {
            margin-right: 5px;
          }
        }
        .fade-enter-active, fade-leave-active {
          transition: opacity 0.5s;
        }
        .fade-enter, .fade-leave-to {
          opacity: 0;
        }
        .input-wrapper {
          padding: 10px;
          .btn-control {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-top: 10px;
            .cancel {
              font-size: 14px;
              color: $text-normal;
              margin-right: 10px;
              cursor: pointer;
              &:hover {
                color: $text-333;
              }
            }
            .confirm {
              font-size: 14px;
            }
          }
        }
      }
    }
    .no-data {
      display: flex;
      justify-content: center;
      padding-top: 10px;
    }
  }
</style>
